<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<el-form :model="form" :rules="rules" ref="dialogForm" :disabled="mode == 'show'" label-width="110px" label-position="top">
				<el-row :gutter="1">
					<el-col :span="24">
                        <div class="titleBox">
                            {{mode=='show'?'查看产品入库单':mode == 'edit'?'编辑产品入库单':'新增产品入库单'}}
                            <div>
                                <!--<el-button @click="resetForm('dialogForm')" size="">退出</el-button>-->
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存</el-button>
                                <!-- <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存并新增</el-button>
                                <el-button type="danger" @click="back" :disabled="mode == 'show'">退出</el-button> -->
                            </div>
						</div>
					</el-col>
				</el-row>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								基本信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="单据编号" prop="product_code">
								<el-input v-model="form.product_code" placeholder="请输入(不填写自动生成)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="单据日期" prop="product_date">
                                <el-date-picker v-model="form.product_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="交货人" prop="delivery_staff">
                                <el-select v-model="form.delivery_staff" filterable clearable placeholder="请选择交货人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="所属组织" prop="org_id">
								<el-select v-model="form.org_id"  filterable style="width: 100%" placeholder="请选择所属组织" clearable @change="orgChange">
                                    <el-option v-for="item in orgList" :key="item.id" :label="item.title" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="交货部门" prop="delivery_depart">
								<el-select v-model="form.delivery_depart" style="width: 100%" clearable filterable @change="deptChange">
                                    <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="仓库" prop="ware_id">
                                <el-select v-model="form.ware_id" filterable clearable placeholder="请选择预入仓库" style="width:100%" @change="wareChange">
                                    <el-option v-for="item in wareList" :key="item.id" :label="item.ware_name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="仓管员" prop="ware_staff">
                                <el-select v-model="form.ware_staff" disabled placeholder="请选择仓管员" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :xs="24" :sm="3">
							<el-form-item label="单据标签" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col> -->
					</el-row>
					<el-row :gutter="1">
						<!-- <el-col :xs="24" :sm="3">
							<el-form-item label="是否存在倒冲" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="生产入库" prop="product_ware">
								<el-input v-model="form.product_ware" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :xs="24" :sm="12">
							<el-form-item label="备注" prop="remark">
								<el-input v-model="form.remark" type="textarea" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								商品信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :span="24">
							<sc-form-table ref="table" v-model="form.ware_detail" :addTemplate="addTemplate" placeholder="暂无数据" height="240" hideAdd hideDelete>
								<!-- <el-table-column prop="production_code" label="单据编号"></el-table-column> -->
								<el-table-column prop="production_code" label="单据编号" align="center">
									<template #default="scope">
                                        <el-input v-model="scope.row.production_code" placeholder="请选择加工单" readonly  class="input"></el-input>
                                        <!-- @click="selectOrder(scope.row,scope.$index)" -->
									</template>
								</el-table-column>
								<!-- <el-table-column prop="purchase_price" label="仓库"></el-table-column> -->
								<el-table-column prop="production_number" label="生产计划数量" align="center"></el-table-column>
								<el-table-column prop="in_number" label="已入库数" align="center"></el-table-column>
								<el-table-column prop="residue_number" label="剩余可入库数" align="center"></el-table-column>
								<el-table-column prop="this_ware" label="本次入库数" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.this_ware" placeholder="本次入库数" class="input" @input="inNumber(scope.row)"></el-input>
									</template>
                                </el-table-column>
								<!-- <el-table-column prop="purchase_price" label="单位"></el-table-column> -->
							</sc-form-table>
						</el-col>
					</el-row>
				</el-card>
				<!-- 制单人信息 -->
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								制单信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="创建人" prop="create_staff">
								<el-select v-model="form.create_staff" filterable clearable placeholder="请选择创建人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="创建时间" prop="create_date">
                                <el-date-picker v-model="form.create_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="修改人" prop="update_staff">
                                <el-select v-model="form.update_staff" filterable clearable placeholder="请选择修改人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="修改时间" prop="update_date">
                                <el-date-picker v-model="form.update_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
                            </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="审核人" prop="check_staff">
                                <el-select v-model="form.check_staff" filterable clearable placeholder="请选择修改人" style="width:100%">
                                    <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="审核时间" prop="check_date">
                                <el-date-picker v-model="form.check_date" type="date" placeholder="请选择日期" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
		</div>
        <!-- <process-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></process-list> -->
	</div>
</template>

<script>
// import ProcessList from '../process/processList.vue'

export default {
	name: '新增入库',
	// components: {ProcessList},
	data() {
		return {
			dialog: {
                save:false
			},
			//表单数据
			form: {
				id: "",
				product_code: "",
				product_date: "",
				delivery_staff: "",
				delivery_depart: "",
				ware_id: "",
				ware_staff: "",
				product_ware: "",
				remark: "",
				goods_id: "",
				ware_detail: [],
                create_staff: "",
				create_date: "",
				update_staff: "",
				update_date: "",
				check_staff: "",
				check_date: "",
				status: "",
                org_id: "",
                work_plan_id: "",
			},
			//验证规则
			rules: {
				goods_name: [{ required: true, message: '请输入物料名称' }],
			},
			total_data: [],
			customizing: false,
			addTemplate: {},
			mode: '',
            clientList: [],
            orgList: [],
            deptList: [],
            wareList: [],
		}
	},
	mounted() {
		this.getUser()
        this.getOrg()
        this.getWare()
        let query_data = {}
        query_data =  JSON.parse(this.$route.query.form)
        this.form.work_plan_id = query_data.id
        let array = []
        array.push({
            machin_id: query_data.machin_id,
            production_code: query_data.machin.production_code,
            production_number: query_data.qualified_num,
            residue_number: query_data.qualified_num - query_data.machin.ware_number,
            in_number: query_data.machin.ware_number,
        })
        setTimeout(()=>{
            this.form.ware_detail = array
        },1000)
		// if (this.$route.query.zhuangtai) {
		// 	this.setData()
		// 	this.mode = this.$route.query.zhuangtai
		// }
	},
	methods: {
        // 获取人员
        async getUser(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.clientList = res.data;
        },// 组织
        async getOrg(){
            var res = await this.$API.all.getOrg.get({is_page:0});
            this.orgList = res.data;
        },
        // 获取部门
        async orgChange(e){
            var res = await this.$API.all.getDep.get({is_page:0,org_id:e});
            this.deptList = res.data;
        },
        wareChange(e){
            this.wareList.map(item=>{
                if(e == item.id){
                    this.form.ware_staff = Number(item.manager)
                }
            })
        },
        // 获取仓库
        async getWare(){
            var res = await this.$API.basicdata.ware.all.get();
            this.wareList = res.data;
        },
		//表单注入数据
		async setData() {
			var reqData = {id: this.$route.query.id}
			var res = await this.$API.production.inhouse.detail.post(reqData);
			this.form.id = this.$route.query.id
            this.form.create_staff = Number(res.data.create_staff)
			this.form.create_date = res.data.create_date
			this.form.update_staff = Number(res.data.update_staff)
			this.form.update_date = res.data.update_date
			this.form.check_staff = Number(res.data.check_staff)
			this.form.check_date = res.data.check_date
			this.form.status = res.data.status
			this.form.product_code = res.data.product_code
			this.form.product_date = res.data.product_date
			this.form.delivery_staff = res.data.delivery_staff
			this.form.org_id = res.data.org_id
            this.orgChange(res.data.org_id)
			this.form.delivery_depart = res.data.delivery_depart
			this.form.ware_id = res.data.ware_id
			this.form.ware_staff = res.data.ware_staff
			this.form.remark = res.data.remark
            let array = []
            res.data.ware_detail.map(item=>{
                array.push({
                    id:item.id,
                    machin_id:item.machin_id,
                    production_code:item.machin.production_code,
                    production_number:item.machin.number,
                    residue_number:item.machin.number - item.machin.ware_number,
                    in_number:item.machin.ware_number,
                    this_ware:item.this_ware,
                })
            })
            this.form.ware_detail = array
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
            this.form.ware_detail = []
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.production.inhouse.edit.post(this.form);
					} else {
						res = await this.$API.production.inhouse.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.$message.success("操作成功")
						if (this.mode == '') {
							this.resetForm('dialogForm')
						} else {
							this.setData()
						}
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
        selectOrder(row,index){
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('add').setData(index)
            })
        },
        handleSuccess(data,mode,index){
            let existingIds = this.form.ware_detail.map(item => item.machin_id);
            if(!existingIds.includes(data[0].id)){
                this.form.ware_detail[index].machin_id = data[0].id
                this.form.ware_detail[index].production_code = data[0].production_code
                this.form.ware_detail[index].production_number = data[0].number
                this.form.ware_detail[index].residue_number = data[0].number - data[0].ware_number
                this.form.ware_detail[index].in_number = data[0].ware_number
            }
        },
        inNumber(row){
            if(row.this_ware > row.residue_number){
                this.$message.error("入库数量不能大于剩余数量")
                row.this_ware = row.residue_number
            }
        },
	}
}
</script>
<style>
.sc-upload-multiple[data-v-f680f9e4] .el-upload--picture-card {
	width: 60px;
	height: 60px;
}

[data-v-f680f9e4] .el-upload-list__item {
	width: 60px;
	height: 60px;
}
</style>
<style lang="scss">
.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	max-height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
	.selectBox {
		display: flex;
		align-items: center;
	}
	.el-col {
		margin-right: 20px;
	}
	.el-form-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.el-form-item__label {
			justify-content: flex-start;
		}
		.el-form-item__content {
			width: 100%;
		}
	}
	.box-card {
		margin-bottom: 10px;
	}
	.box-card1 {
		.el-form-item__label {
			justify-content: flex-start;
			height: 0;
		}
	}
	.box-card2 {
		.el-col {
			margin-right: 0;
		}
	}
	.el-form {
		//background: #ffffff;
		//padding: 20px;
		min-height: 90%;
		.titleBox {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.titleBox1 {
			font-weight: 600;
			border: none;
			font-size: 16px;
		}
	}
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
</style>
